<template>
  <div class="images-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>素材管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="image-btn">
        <el-radio-group @change="changeCate" size="small" v-model="params.collect">
          <el-radio-button  :label="false">全部</el-radio-button>
          <el-radio-button  :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button @click="dialogUploadVisible = true" size="small" type="success">添加素材</el-button>
      </div>
      <!-- 素材列表 -->
      <el-row :gutter="10" style="margin-top: 30px">
        <el-col class="image-item" :span="4" v-for="(item, index) in imageList" :key="index">
          <el-image
          style="height: 180px;width:180px; margin-top:20px"
          :src="item.url">
          </el-image>
          <div class="image-action">
              <i 
              :class="{
                  'el-icon-star-on' : item.is_collected,
                  'el-icon-star-off' : !item.is_collected
              }" @click="collected(item.id,item.is_collected)">
              </i>
              <!-- <i   class="el-icon-star-off"></i> -->
              <i class="el-icon-delete-solid" @click="deleteImage(item.id)"></i>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="totalCount">
     </el-pagination>
    </el-card>
    <!-- 上传素材对话框 -->
    <el-dialog title="上传素材" style="margin-top:15vh" width="300px"   :append-to-body="true" :visible.sync="dialogUploadVisible ">
      <el-upload
        action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
        :headers="uploadHeader"
        name="image"
        multiple
        :show-file-list="false"
        list-type="picture-card"
        :on-success="onUploadSucess">
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import { getAllImages, deleteImageItem,collectedImage } from '@/api/image/image.js'
import { comfirm } from '@/utils/comfirm.js'
export default {
  name: "ImagesIndex",
  data() {
    return {
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        totalCount:null,
        imageList:[],
        params:{
          collect: false,
          page: 1,
          per_page: 12
        },
        dialogUploadVisible: false,
        uploadHeader:{
            Authorization: 'Bearer '+this.$store.state.adminInfo.token
        }
    };
  },

  mounted() {
      this.getAllImageList()
  },
  methods: {
     async getAllImageList (){
          const imageRes = await getAllImages(this.params)
          this.totalCount = imageRes.data.total_count
          this.imageList = imageRes.data.results
      },
      changeCate (value){
          this.params.collect = value
          this.params.page = 1
          this.getAllImageList()
      },
      handleCurrentChange (newPage){
          this.params.page = newPage
          this.getAllImageList()
      },
    //   openUploadDialog(){
    //       this.dialogUploadVisible = true
    //   }
    onUploadSucess (){
        this.dialogUploadVisible = false
        this.$message.success('上传成功')
        this.getAllImageList()
    },
    async deleteImage (id){
        try {
            const confir = await comfirm('素材图片')
            if (confir === 'confirm'){
                const deleteRes = await deleteImageItem(id)
                if(deleteRes.status === 204){
                    this.$message.success('删除成功')
                    this.getAllImageList()
                }
            }
            
        } catch (error) {
            this.$message.error('删除失败')
        }
      
    },
    // 收藏/取消收藏
    async collected (id,isCollected){
      const collectRes = await collectedImage(id,!isCollected)
    //   if(collectRes.status === 201){
    //       if(isCollected){
    //           this.$message.success('取消收藏成功')
    //       }else{
    //           this.$message.success('添加收藏成功')
    //       }

    //   }
    console.log(collectRes);
    }
  },
};
</script>

<style lang="less" scoped>
.image-btn{
   display: flex;
   justify-content: space-between;
}
.pagination{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
/deep/.el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.image-item{
  position: relative;
  .image-action{
  height: 40px;
  background-color: rgb(204 , 204 , 204 , .5);
  position: absolute;
  bottom: 4px;
  left: 5px;
  right: 5px;
  width:180px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .el-icon-star-on {
      font-size: 20px;
      color: red;
  }
  i {
      cursor: pointer;
  }
//   .not-collected{
//       font-size: 20px;
//     //
//   }
}
}

</style>